<template>
  <div>
    <login-bar v-show="loginBarVisible" @showLog="showLoginModel()"></login-bar>
    <login-model v-show="loginModelVisible" @hiddenB="hiddenLoginBar()"></login-model>
    <banner-tip v-show="bannerTipVisible"></banner-tip>
    <div id="map" @touchstart="putup"></div>

    <div id="getcar"  @touchstart="drag">
      <div class="getcar">
        <div class="parkTop">
          <div class="parkGet">
            <span class="parkCircle"></span>
            <span>取车点</span>
          </div>
          <div class="parkName">
            <span class="park_name ellipsis">{{getcarpark}}</span>
            <span class="park_y" v-if="funtopark==1"></span>
          </div>
          <div class="parkChange" @click="changegetpark">更换 <span>></span>
          </div>
        </div>
        <div class="carlist">
          <ul>
            <li v-for="(v,index) in carsdetail" :data-carId="v.carId" class="carid" >
              <div class="carpic fl">
                <img :src="v.carImg" alt="" class="pic">
                <p class="plate">{{v.plateNum}}</p>
              </div>
              <div class="cardetail fl">
                <p>{{v.name}}+{{v.seats}}</p>
                <p><span style="color:#09C16A">{{v.preTime}}</span>元/分钟+<span style="color:#09C16A">{{v.preMile}}</span>元/公里</p>
                <p>
                  <img :src='imgSrc.replace("??",Math.ceil(v.battery/10))' alt="">

                  <span>{{v.enmileage}}</span>
                </p>
              </div>
              <div class="chose fr" :class="{'active':!index}"></div>
              <!--用车红包-->
              <div class="redbag" v-if="v.carMap.redPacketAmount>0">
                <span class="bagpic"></span>
                <span>立减{{v.carMap.redPacketAmount}}元</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="rebackbg" v-show="backcar">
        <div class="reback" @click="goreback" :class="{'active': stepone}">
          <span>选择还车点</span>
          <span class="nextBtn"></span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import qs from 'qs'
  import LoginBar from "../components/LoginBar"
  import LoginModel from "../pages/LoginModel"
  import BannerTip from "../components/BannerTip"
  export default{
    name: 'Getcar',
    components: {
      LoginBar,
      LoginModel,
      BannerTip,
    },
    data () {
      return {
        imgSrc: "../../static/image/img_energy_lv??.png",
        carsdetail: [],
        getcarpark: '',
        funtopark: '',
        // 按钮信息
        backcar: true,
        // stepone ---用户所有的认证信息通过之后为true，有任意一个不通过为false；按钮颜色及点击状态
        stepone: true,

        loginBarVisible: false,
        loginModelVisible: false,
        bannerTipVisible: false,
      }
    },
    methods: {
      drag: function (e) {
        var startY = e.changedTouches[0].pageY, distY
        var Getcar = document.getElementById('getcar')
        Getcar.ontouchmove = function (e) {
          distY = startY - e.changedTouches[0].pageY
          console.log(distY)
        }

        Getcar.ontouchend = function () {
          if (distY > 0) {
            $('#getcar,.getcar').animate({'height': '14rem'}, 300)
            $('.carlist').css({'overflow': 'scroll'})
            $('.rebackbg').hide()
          }
          document.ontouchmove = null
        }
      },
      putup () {
        $('#map').on('touch', $('.BMap_mask'), function () {
          console.log(111)
          $('#getcar,.getcar,#rebackpark,.rebackpark').animate({'height': '7.2rem'}, 300)
          $('.carlist,.parklist').css({'overflow-y': 'hidden'})
          $('.rebackbg').show()
        })
      },
      goreback () {
        //没有token，显示登陆页面
        if (this.stepone) {
          this.$router.push('Rebackpark')
        }
      },
      changegetpark () {
        sessionStorage.backlng = sessionStorage.positionLon
        sessionStorage.backlat = sessionStorage.positionLat
        this.$router.push('getcarpark')
      },
      mapready () {
        console.log(sessionStorage.positionLon, sessionStorage.positionLat)
        var mp = new BMap.Map('map')
        mp.setMapStyle({ styleJson: this.global.mapStyle });
//        mp.panTo(mk);
        var p1 = new BMap.Point(sessionStorage.positionLon, sessionStorage.positionLat)
//        var p2 = new BMap.Point(116.508328,39.919141)

        var driving = new BMap.DrivingRoute(mp, {renderOptions: {map: mp, autoViewport: true}})
//        driving.search(p1, p2);
//        mp.centerAndZoom(point, 14)
//      mp.addControl(new BMap.MapTypeControl())
        mp.enableScrollWheelZoom(true)
        mp.enableDoubleClickZoom(true)
        // 复杂的自定义覆盖物
        function ComplexCustomOverlay (point, carcount, parkingId, spantext, parkingName, parkingAddress, parkinglat, _parkinglon, parkingkind) {
          this._point = point
          this._text = carcount
          this._spantext = spantext
          this._parkingId = parkingId
          this._parkname = parkingName
          this._parkingAddress = parkingAddress
          this._parkinglat = parkinglat
          this._parkinglon = _parkinglon
          this._parkingKind = parkingkind
        }
        ComplexCustomOverlay.prototype = new BMap.Overlay()
        ComplexCustomOverlay.prototype.initialize = function (map) {
          this._map = map;
          var div = this._div = document.createElement("div")
          div.style.width = "30px"
          div.style.height = "30px"
          div.style.fontSize = "14px"
          div.style.lineHeight = "30px"
          div.className = "mappoint"
          div.setAttribute('data-parkingId', this._parkingId)
          div.setAttribute('data-carCount', this._text)
          div.setAttribute('data-parkname', this._parkname)
          div.setAttribute('data-spantext', this._spantext)
          div.setAttribute('data-parkingAddress', this._parkingAddress)
          div.setAttribute('data-parkinglat', this._parkinglat)
          div.setAttribute('data-parkinglon', this._parkinglon)
          div.setAttribute('data-parkingkind', this._parkingKind)
          div.innerHTML = this._text
          var span = this._span = document.createElement("span")
          span.className = "mapspan"
          span.style.width = "60px"
          span.style.height = "20px"
          span.style.fontSize = "12px"
          span.style.lineHeight = "20px"
          span.innerHTML = this._spantext
          div.appendChild(span)
          mp.getPanes().labelPane.appendChild(div)
          return div
        }
        ComplexCustomOverlay.prototype.draw = function () {
          var map = this._map;
          var pixel = map.pointToOverlayPixel(this._point)
          this._div.style.left = pixel.x - 15 + "px"
          this._div.style.top  = pixel.y - 15 + "px"
        }
//        地图停车场
        var _this = this
        this.axios.post('car/parkingNewListV2.json', qs.stringify({
          positionLon: sessionStorage.positionLon,
          positionLat: sessionStorage.positionLat,
          userPickCityCode: this.global.userPickCityCode
        }))
          .then(function (res) {
            if(res.data.code==200){
              var parkingdata = res.data.modelData.parkingMapVoList[2].parkingList
              var parkingdata1 = res.data.modelData.takeParking
              console.log(parkingdata,res)
//            取车点id，最终id 取车点经纬度，默认为推荐经纬度 从选车页面会来判断是否从新赋值
              if (!sessionStorage.getparkjudge){
                sessionStorage.getparklng = parkingdata1.parkingLon
                sessionStorage.getparklat = parkingdata1.parkingLat
                sessionStorage.initparkid = parkingdata1.parkingId
                sessionStorage.parkingkind = parkingdata1.parkingKind
                sessionStorage.parkingkname = parkingdata1.parkingName
              }
              _this.getcarpark = sessionStorage.parkingkname
              _this.funtopark = sessionStorage.parkingkind
              var p2 = new BMap.Point(sessionStorage.getparklng, sessionStorage.getparklat)
              driving.search(p1, p2);
              _this.showcars()
              mp.centerAndZoom(new BMap.Point(parkingdata[0].parkingLon, parkingdata[0].parkingLat), 14)
              for (let i = 0; i < parkingdata.length; i++) {
                mp.addOverlay(new ComplexCustomOverlay(new BMap.Point(parkingdata[i].parkingLon, parkingdata[i].parkingLat), parkingdata[i].carCount, parkingdata[i].parkingId, parkingdata[i].distanceDesc, parkingdata[i].parkingName, parkingdata[i].parkingAddress, parkingdata[i].parkingLat, parkingdata[i].parkingLon,parkingdata[i].parkingKind))
              }
              mp.addOverlay(new ComplexCustomOverlay(new BMap.Point(sessionStorage.positionLon, sessionStorage.positionLat), '', 'userlocation', 1, 1, 1, 1, 1, 1))
//            坐标点击事件
              $('.mappoint').on('touchstart', function () {
                console.log($(this).attr('data-parkingId'))
                if ($(this).attr('data-parkingid') == 'userlocation'){
                  return false
                }
                $('.mappoint').removeClass('active')
                $(this).addClass('active')
                if ($(this).attr('data-carCount') == 0) {
                  console.log('没有车')
                  return false
                } else {
                  var p2 = new BMap.Point($(this).attr('data-parkinglon'), $(this).attr('data-parkinglat'))
                  driving.search(p1, p2)
                  sessionStorage.parkingkname = $(this).attr('data-parkname')
                  sessionStorage.parkingkind = $(this).attr('data-parkingkind')
//                点击之后改变取车点的经纬度，和id 取车场name 活动
                  _this.getcarpark = sessionStorage.parkingkname
                  _this.funtopark = sessionStorage.parkingkind
                  sessionStorage.initparkid = $(this).attr('data-parkingid')
                  sessionStorage.getparklng = $(this).attr('data-parkinglon')
                  sessionStorage.getparklat = $(this).attr('data-parkinglat')
                  _this.showcars()
                }
              })
            }
          })

        mp.addEventListener("touchstart", function () {
          $('#getcar,.getcar,#rebackpark,.rebackpark').animate({'height': '7.2rem'}, 300)
          $('.carlist,.parklist').css({'overflow-y': 'hidden'})
          $('.rebackbg').show()
        })
      },
//      选中取车网点展示车辆
      showcars () {
        var _this = this
        this.axios.post('/order/parkingConfirmPage.json', qs.stringify({
            parkingId: sessionStorage.initparkid
        }))
          .then(function (res) {
            var data = res.data.modelData
            if(res.data.code==200) {
              _this.carsdetail = data.searchList
              sessionStorage.carId = data.searchList[0].carId
              $('.carid').children('.chose').eq(0).addClass('active')
            }
          })
        $('ul').on('click','.chose', function () {
          sessionStorage.carId = $(this).parents('.carid').attr('data-carId')
          $('.chose').removeClass('active')
          $(this).addClass('active')
        })
      },
      // 展示登录
      showLoginModel () {
        this.loginModelVisible = true;
      },
      // 隐藏Bar
      hiddenLoginBar (e) {
        // alert(e);
        this.loginBarVisible = false;
        this.bannerTipVisible = true;
        this.stepone = true;
      },
      showBannerTip () {
        alert("banner");
      }


    },
    mounted () {
      this.mapready()
      // 是否有token
      if (sessionStorage.token) {

      }
      // 判断是否登录
      this.axios.post("/order/getBannerList.json", qs.stringify({
        soruceFor: "wx-h5-uc",
      }))
      .then(res => {
        if (res.data.code != 200) {
          this.loginBarVisible = true;
          this.stepone = false;
        }
      })

    }
  }
</script>
<style lang="scss">
  @import "../style/scss/getcar";
  .bagpic{
    background: url("../../static/image/icon_sales_4.png");
    -webkit-background-size: cover;
    background-size: cover;
  }
  .park_y{
    background: url("../../static/image/icon_payback.png");
    -webkit-background-size: cover;
    background-size: cover;
  }
  .chose{
    background: url("../../static/image/icon_select.png");
    -webkit-background-size: cover;
    background-size: cover;
  }
  .chose.active{
    background: url("../../static/image/icon_selected.png");
    -webkit-background-size: cover;
    background-size: cover;
  }
  .nextBtn{
    display: inline-block;
    width:14px;
    height:24px;
    background: url("../../static/image/icon_next.png");
    -webkit-background-size: cover;
    background-size: cover;
    margin-left:46px;
    margin-top:38px;
  }
</style>
